<template>
  <div>
    <!--用户列表-->
    <user-list v-if="status=='user-list'" @returnValue="returnValue"></user-list>
    <!--用户明细-->
    <user-detail v-if="status=='user-detail'" @returnValue="returnValue" :user-id="userId"
                 :editable="editable" :org-id="orgId"></user-detail>
  </div>
</template>

<script>
  import UserList from "./UserList";
  import UserDetail from "./UserDetail";

  export default {
    name: "UserMain",
    components: {UserDetail, UserList},
    data() {
      return {
        status: 'user-list',
        userId: null,
        deptId: null,
        orgId: null,
        editable: false
      }
    },
    methods: {
      returnValue(value) {
        this.status = value.status
        this.userId = value.userId
        this.deptId = value.deptId
        this.orgId = value.orgId
        this.editable = value.editable
      }
    }
  }
</script>

<style>
  .pay-list .el-tabs--border-card > .el-tabs__header {
    background-color: #E4E8EB;
  }

  .pay-list .el-tabs--border-card {
    border: 0;
  }

  .row-bg {
    height: 50px;
    background-color: #E4E8EB;
    font-size: 12px;
    padding-left: 20px;
  }
</style>
